<template>
  <el-container>
    <el-aside
      :width="isCollapse ? '63px' : '200px'"
      style="transition: all 0.4s"
    >
      <Menu :isCollapse="isCollapse" />
    </el-aside>
    <el-container>
      <el-header>
        <!-- <Header @changeCollapse="changeCollapse" :isCollapse="isCollapse" /> -->
        <Header>
          <component :is="isCollapse ? 'Expand' : 'Fold'"></component>
        </Header>
      </el-header>
      <BreadCrumb />
      <el-main>
        <div class="main">
          <!-- <Main /> -->
          <RouterView />

          <!-- 固定写法，用法和组件的元素的过渡动画的一样 -->
          <!-- router4的写法 -->
          <!-- <router-view v-slot="{ Component }">
            <transition name="fade">
              <component :is="Component" />
            </transition>
          </router-view> -->

          <!-- router3的写法 -->
          <!-- <Transition name="fade">
            <router-view></router-view>
          </Transition> -->

          <!-- router4的写法，缓存组件 -->
          <!-- <router-view v-slot="{ Component }">
            <KeepAlive>
              <component :is="Component" />
            </KeepAlive>
          </router-view> -->

          <!-- router3的写法 -->
          <!-- <keep-alive>
            <router-view></router-view>
          </keep-alive> -->
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Menu from "./components/Menu.vue";
import Header from "./components/Header.vue";
import BreadCrumb from "./components/BreadCrumb.vue";
// import Main from "./components/Main.vue";

import { mapState } from "vuex";

// console.log("home被加载了");

export default {
  // created() {
  //   // this.$router.push("/login");
  // },
  components: {
    Menu,
    Header,
    BreadCrumb,
    // Main,
  },
  computed: mapState("home", ["isCollapse"]),
  // data() {
  //   return {
  //     isCollapse: false,
  //   };
  // },
  // methods: {
  //   changeCollapse() {
  //     this.isCollapse = !this.isCollapse;
  //   },
  // },
};
</script>

<style scoped>
.el-container {
  min-height: 100vh;
}
.el-header {
  background: #fff;
}
.main {
  background-color: #fff;
  height: 100%;
  position: relative;
  padding: 20px;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}

.fade-enter-from {
  opacity: 0;
  transform: translateX(200px);
}
.fade-leave-to {
  opacity: 0;
  transform: translateX(-200px);
}
</style>
